<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar leftToolbar">
      <el-form :inline="true" :model="filters" :size="size">
        <el-col :span="3">
          <el-form-item>
            <el-input v-model="filters.title" placeholder="标题" />
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-select v-model="filters.status" clearable placeholder="状态">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <kt-button icon="fa fa-search" label="搜索" perms="blog:article:view" type="primary" @click="findPage(null)" />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-plus" label="新增" perms="blog:article:add" type="primary" @click="$router.push(getCurrentParentPath()+'/edit')" />
          </el-form-item>
        </el-col>
      </el-form>
      <!--表格显示列界面-->
      <kt-table-column-filter-dialog ref="filterDialog" :columns="columns" @handle-filter-columns="handleFilterColumns" />
    </div>
    <div class="toolbar rightToolbar">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)" />
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog" />
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
    </div>
    <!--表格内容栏-->
    <kt-table perms-edit="blog:article:edit" perms-delete="blog:article:remove" :data="pageResult" :page-params="pageRequest" :columns="filterColumns" @find-page="findPage" @handle-edit="handleEdit" @handle-delete="handleDelete" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import KtTable from '@/views/Core/KtTable'
import KtButton from '@/views/Core/KtButton'
import KtTableColumnFilterDialog from '@/views/Core/KtTableColumnFilterDialog'
import { formatDate } from '@/utils/datetime'
export default {
  components: {
    KtTable,
    KtButton,
    KtTableColumnFilterDialog
  },
  data () {
    return {
      size: 'mini',
      filters: {
        title: '',
        status: ''
      },
      columns: [
        { prop: 'id', label: 'ID', minWidth: 50, width: 50, show: false },
        { prop: 'title', label: '标题', minWidth: 120, sortable: false },
        { prop: 'labels', label: '标签', minWidth: 120, sortable: false },
        { prop: 'counts', label: '浏览数', minWidth: 80, width: 80 },
        { prop: 'status', label: '状态', minWidth: 80, width: 80, formatter: this.statusFormat },
        { prop: 'creator', label: '作者', minWidth: 80, width: 80 },
        { prop: 'updateTime', label: '修改时间', minWidth: 130, width: 130, formatter: this.dateFormat }
      ],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10, sortby: 'updateTime', order: 'desc' },
      pageResult: {}
    }
  },
  methods: {
    // 获取分页数据
    findPage (data) {
      if (data !== null) {
        this.pageRequest = data.pageRequest
      }
      this.pageRequest.params = {
        titleLike: this.filters.title,
        status: this.filters.status
      }
      this.$api.article.findPage(this.pageRequest).then((res) => {
        this.pageResult = res.data
      }).then(data != null ? data.callback : '')
    },
    // 批量删除
    handleDelete (data) {
      this.$api.article.batchDelete(data.params).then(data != null ? data.callback : '')
    },
    // 显示编辑界面
    handleEdit (params) {
      this.$router.push({ path: this.getCurrentParentPath() + '/edit', query: { id: params.row.id } })
    },
    // 时间格式化
    dateFormat (row, column, cellValue, index) {
      return formatDate(cellValue, 'yy-MM-dd hh:mm')
    },
    // 状态格式化
    statusFormat (row, column, cellValue, index) {
      for (let i = 0; i < this.statusList.length; i++) {
        if (this.statusList[i].value === cellValue) {
          return '<span class="' + this.statusList[i].clazz + '">' + this.statusList[i].label + '</span>'
        }
      }
      return ''
    },
    // 处理表格列过滤显示
    displayFilterColumnsDialog () {
      this.$refs.filterDialog.setDialogVisible(true)
    },
    // 处理表格列过滤显示
    handleFilterColumns (data) {
      this.filterColumns = data.filterColumns
      this.$refs.filterDialog.setDialogVisible(false)
    }
  },
  mounted () {
    this.$refs.filterDialog.initColumns()
  },
  computed: {
    ...mapState({
      statusList: state => state.app.typeList.blog_article_status
    })
  }
}
</script>
